<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layuiAdmin</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
        <div class="layui-col-md12">
            <div class="layui-panel">
               上传文件
            </div>
        </div>
        <div class="layui-upload">
            <input type="file" name="file" id="test20">
            <button type="button"  >开始上传</button>
        </div>
</form>
</body>
</html>

<script src="./js/jquery.min.js"></script>
<script src="./layui/layui.all.js"></script>
<script src="./js/common.js"></script>
<script>
    layui.use(['upload', 'element', 'layer','form'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer,
            form = layui.form;
        var photo;

        //选完文件后不自动上传
    upload.render({
        elem: '#test20'
        ,url: '/upload/uploadBlog' //改成您自己的上传接口
        ,done: function(res){
            layer.msg('上传成功');
            console.log(res)
        }
    });
        form.on('submit(demo1)', function(data){

            data.field.file=photo;
            // alert(JSON.stringify(data.field));
            $.ajax({
                url: "/article/add",
                type: "post",
                data:JSON.stringify(data.field),
                contentType:"application/json",
                success: function (data) {
                    layer.msg('提交成功');
                    // window.location.href("article.html");
                    $("#example")[0].reset();

                    // $('').html(''); //置空上传失败的状态
                }
            })
            return false;
        });

    });
</script>

</body>
</html>
